<template>
  <div class="search">
    <NavBar>
      <i class="fa fa-th-large" slot="scan-code" @click="toClassifyPage"></i>
      <input v-model="keyword1" type="text" placeholder="请输入搜索内容" slot="search" @keyup.enter="search(keyword1)">
      <i :class="{active: isActive,noActive: !isActive}" @click="toLogin" class="fa fa-user-circle-o" slot="login"></i>
    </NavBar>
    <Banner :bannerList="bannerList"></Banner>
    <div v-if="isShow" class="message">
      搜索结果如下：
    </div>
    <div v-else class="message">
      没有查找到关于<span style="color: black">{{keyword}}</span>的文章：
    </div>
    <div @click="toArticle(item.id)" class="hotspot-list" v-for="(item,index) in data" :key="index">
      <div class="content">
        <p>{{item.title}}</p>
        <p>{{item.source}}&nbsp;&nbsp;|&nbsp;&nbsp;{{item.date | dateFormat }}</p>
        <div>
          <span>{{item.content}}</span>
        </div>
        <p><i class="fa fa-eye" style="margin-left: -9px"></i>
          {{item.readCount}}&nbsp;&nbsp;&nbsp;
          <i class="fa fa-commenting"></i>
          520
        </p>
      </div>
      <div class="img">
        <div class="picture">
          <img :src="item.imgUrl" alt="">
        </div>
        <div class="classify">
          <span>{{item.classify}}</span>
        </div>
      </div>
    </div>
    <div v-if="isShow" class="loading">
      <p>
        <a href="javascript:(0)">到此结束！！！</a>
      </p>
    </div>
  </div>
</template>

<script>
import NavBar from "../../components/navbar/NavBar";
import Banner from "../../components/banner/Banner";
import dayjs from "dayjs";
export default {
  name: "Search",
  components: {
    NavBar,
    Banner
  },
  data(){
    return{
      isActive: false,
      keyword: '',
      keyword1: '',
      data: '',
      bannerList: [
        '/img/banner1.jpg',
        '/img/banner2.jpg',
        '/img/banner3.jpg',
        '/img/banner4.jpg',
      ],
    }
  },
  methods: {
    //去分类页面
    toClassifyPage(){
      this.$router.push('/classify');
    },
    //登录
    toLogin(){
      if(sessionStorage.getItem('username')){
        //已登录，跳转我的页面
        this.$router.push('/personal');
      }else{
        //  否则跳转到登录页面
        this.$router.push('/login');
      }
    },
    //  文章详情页
    toArticle(id){
      //把id传递到文章详情页
      this.$router.push({
        path: '/article',
        query: {id: id}
      })
    },
    //搜索功能
    search(keyword){
      // console.log(keyword);
      sessionStorage.setItem('keyword',keyword);
      //根据关键字请求相关文章
      this.axios.get(`${process.env.VUE_APP_URL}/getKeywordData`,{
        params: {
          keyword: keyword
        }
      }).then((res)=>{
        this.data = res.data;
      })
    }
  },
  created() {
    //判断是否已登录
    if (sessionStorage.getItem('username')){
      this.isActive = true;
    };
    //接收输入过来的关键字
    //把关键字存储到session中
    this.keyword = sessionStorage.getItem('keyword');
    //根据关键字请求相关文章
    this.axios.get(`${process.env.VUE_APP_URL}/getKeywordData`,{
      params: {
        keyword: this.keyword
      }
    }).then((res)=>{
      this.data = res.data;
    })
  },
  filters: {
    //处理日期过滤器
    dateFormat(date){
      return dayjs(date).format('YYYY-MM-DD HH:mm');
    }
  },
  computed: {
    isShow(){
      if (this.data.length != 0){
        return true;
      }else {
        return false;
      }
    }
  }
}
</script>

<style scoped>
.active{
  color: red;
}
.noActive{
  color: #AAAAAA;
}
.message{
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  margin-top: 6px;
  font-size: 0.6rem;
  color: red;
  background-color: white;
}
.hotspot-list{
  width: 100%;
  height: 3.5rem;
  margin-top: 6px;
  background:white;
}
.hotspot-list div{
  display: inline-block;
  float: left;
}
.hotspot-list .content{
  width: 70%;
  height: 3.5rem;
  font-size: 0.6rem;
}
.hotspot-list .content p{
  text-indent: 12px;
}
.hotspot-list .content p:first-child{
  width: 100%;
  height: 0.7rem;
  line-height: 0.7rem;
  font-size: 0.5rem;
  color: black;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hotspot-list .content p:nth-child(2){
  color: #AAAAAA;
  font-size: 0.4rem;
  height: 0.7rem;
  line-height: 0.6rem;
}
.hotspot-list .content div{
  width: 93%;
  margin-left: 12px;
  height: 1.4rem;
}
.hotspot-list .content div span{
  width: 100%;
  font-size: 0.45rem;
  color: #555555;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}
.hotspot-list .content p:last-child{
  color: #AAAAAA;
  width: 100%;
  height: 0.6rem;
  line-height: 0.6rem;
  font-size: 0.4rem;
}

.hotspot-list .img{
  width: 30%;
  height: 3.5rem;
}
.hotspot-list .img div{
  font-size: 0.5rem;
  text-align: center;
}
.hotspot-list .img .picture{
  width: 100%;
  height: 2.7rem;
  line-height: 2.7rem;
  text-align: center;
}
.hotspot-list .img .picture img{
  width: 100%;
  height: 100%;
}
.hotspot-list .img .classify{
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
}
.hotspot-list .img .classify span{
  display: inline-block;
  width: 70%;
  height: 0.6rem;
  line-height: 0.6rem;
  color: #AAAAAA;
  background:#f1f1f1;
  border-radius: 5px;
}
.loading{
  width: 100%;
  height: 2.5rem;
  margin-top: 10px;
  text-align: center;
}
.loading p{
  height: 1rem;
  line-height: 1rem;
  font-size: 0.5rem;
}
.loading p a{
  display: inline-block;
  height: 0.8rem;
  line-height: 0.8rem;
  text-decoration: none;
}
</style>